<template>
  <div>
    <x-Table
        :loading="loading"
        :table-data="tableData"
        :options-data="options"
        :rule-form="ruleForms"
        :pagination="pagination"
        @handleAdd="handleAdd"
        @handlePaginationCurrentChange="handlePaginationCurrentChange"
        @handlePaginationSizeChange="handlePaginationSizeChange"
        @handleHeardDel="handleHeardDel"
        @searchForm="searchForm"
        @resetForm="resetForm"
    >
    </x-Table>

    <!--    弹窗区域-->
    <el-dialog
        v-dialog-drag
        :title="alertTitle"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="45%"
    >
      <form-create
          v-model="fapi"
          :rule="rule"
          :option="option"
          :value.sync="formParam"
          @submit="onSubmit"
      >
      </form-create>
    </el-dialog>
    <!--    end-->
  </div>
</template>

<script>
let _this;
export default {
  data() {
    return {
      searchParams: {},//搜索对象
      row: null,
      ruleForms: {
        account: {label: "标题", prop: "title", type: "text"},
        type: {
          label: "类型",
          prop: "types",
          type: "select",
          select: [{label: '通知公告', value: '通知公告'}, {label: '政策支持', value: '政策支持'}, {label: '新闻通知', value: '新闻通知'}]
        },
        isSlideshow: {
          label: "轮播",
          prop: "isSlideshow",
          type: "select",
          select: [{label: 'yes', value: '1'}, {label: 'no', value: '0'},]
        },
      },
      loading: true,
      tableData: [
        //   {
        //   id:1,
        //   title:'这是标题',
        //   content:'内容啊啊啊啊啊啊啊啊',
        //   coverImg:'https://lpsjxjyjd-school.oss-cn-beijing.aliyuncs.com/uploads/20211027/9c4d5fe497bf02e14bb4bc0317fa697e.png',
        //   type:'新闻通知',
        //   isSlideshow:true,
        //   create_time:'2021-12-12 12:12',
        // }
      ],
      fapi: {},
      formParam: {},
      pagination: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [10, 20, 50, 100],
      }, //分页参数
      rule: [
        {
          "type": "input",
          "field": "title",
          "title": "标题",
          "info": "",
          "_fc_drag_tag": "input",
          "hidden": false,
          "display": true
        },
        {
          "type": "upload",
          "field": "coverImg",
          "title": "上传",
          "info": "",
          "props": {
            "action": "http://www.free.com/api/Upload/upload",
            "onSuccess": function (res, file) {
              file.url = res.data[0].url;
            },
            "uploadType": 'image',
            'name': 'file',
            limit: 1
          },
          "_fc_drag_tag": "upload",
          "hidden": false,
          "display": true,
          "value": []
        },
        {
          "type": "select",
          "field": "type",
          "title": "类型",
          "info": "",
          "effect": {
            "fetch": ""
          },
          "options": [
            {
              "value": "通知公告",
              "label": "通知公告"
            },
            {
              "value": "政策支持",
              "label": "政策支持"
            },
            {
              "value": "新闻通知",
              "label": "新闻通知"
            }
          ],
          "_fc_drag_tag": "select",
          "hidden": false,
          "display": true
        },
        {
          "type": "switch",
          "field": "isSlideshow",
          "title": "是否轮播",
          "info": "",
          "_fc_drag_tag": "switch",
          "hidden": false,
          "display": true
        },
        {
          "type": "fc-editor",
          "field": "content",
          "title": "内容",
          "info": "",
          "_fc_drag_tag": "fc-editor",
          "hidden": false,
          "display": true,
          "props": {
            config: {
              uploadImgServer: 'http://www.free.com/api/Upload/upload',
              uploadFileName: 'file',
              height: '600',
            }
          }
        }
      ],
      options: {
        fields: {
          id: {label: "ID", prop: "id", width: "120", order: true},
          title: {label: "标题", prop: "title",},
          content: {label: "内容", prop: "content"},
          type: {
            label: '类型',
            prop: 'type',
            type: 'tag',
            options: [{attr: '', label: '通知公告'}, {attr: 'success', label: '政策支持'}, {attr: 'warning', label: '新闻通知'}]
          },
          image: {
            label: '封面图',
            prop: 'coverImg',
            type: 'image',
            sing: ',',
            style: {width: '30px', height: '30px'},
            preview: function (scope, item, index) {
              console.log(scope)
              console.log(item)
              console.log(index)
            },
          },
          status: {
            label: "轮播",
            prop: "isSlideshow",
            type: "switch",
            activeValue: true,
            inactiveValue: false,
            switchChage: function (scope) {

            },
          },
          create_at: {label: "创建时间", prop: "create_time", order: true},
          button: {
            label: "操作",
            width: "130",
            type: "func",
            fixed: true,
            edit: function (scope) {
              _this.row = scope['row'];
              _this.alertTitle = '编辑'
              _this.dialogVisible = true;
              let data = [];
              data.push(scope['row']['coverImg']);
              setTimeout(() => {
                _this.fapi.setValue('title', scope['row']['title']);
                _this.fapi.setValue('status', scope['row']['status']);
                _this.fapi.setValue('content', scope['row']['content']);
                _this.fapi.setValue('type', scope['row']['type']);
                _this.fapi.setValue('isSlideshow', scope['row']['isSlideshow']);
                _this.fapi.setValue('coverImg', data);
              }, 0)

            },
            del: function (scope) {
              _this.deleteInform(scope['row']['id']);
            },
          },
        },
      },
      option: {
        form: {
          inline: false,
          labelPosition: "right",
          size: "small",
          labelWidth: "125px",
          hideRequiredAsterisk: false,
          showMessage: true,
          inlineMessage: false,
        },
        resetBtn: true,
      },
      dialogVisible: false,
      alertTitle: "添加",
    }
  },
  methods: {
    resetForm: function () {
      _this.searchParams = {};
    },
    handleAdd: function () {
      _this.alertTitle = '添加';
      _this.dialogVisible = true;
    },
    handlePaginationCurrentChange: function (val) {
      _this.loading = true;
      _this.pagination["currentPage"] = val;
      _this.searchTitle(_this.searchParams)
    },
    handlePaginationSizeChange: function (val) {
      _this.loading = true;
      _this.pagination["pageSize"] = val;
      _this.searchTitle(_this.searchParams)
    },
    handleHeardDel: function (val) {

      let data = [];
      val.forEach((item, index) => {
        console.log(item)
        data.push(item.id)
      })
      _this.deleteInform(data);
    },
    searchForm: function (val) {
      _this.loading = true;
      _this.searchParams = val;
      _this.searchTitle(val);
    },
    onSubmit: function (val) {
      if (_this.alertTitle === '添加') {
        _this.createInform(val);
      } else {
        _this.updateInform(val);
      }
    },
    getInformList: function () {
      _this.$store
          .dispatch("portal/getInformList", {
            page: _this.pagination["currentPage"],
            pageSize: _this.pagination["pageSize"],
          })
          .then(() => {
            _this.loading = false;
            _this.dialogVisible = false;
            let data = this.$store.state.portal.informList;
            _this.tableData = data.data;
            _this.pagination["currentPage"] = data["current_page"];
            _this.pagination["total"] = data["total"];
          });
    },
    createInform: function (param) {
      _this.$store
          .dispatch("portal/createInform", {
            title: param["title"],
            content: param['content'],
            coverImg: param["coverImg"],
            type: param["type"],
            isSlideshow: param["isSlideshow"],
          })
          .then((res) => {
            const {data, msg} = res;
            if (data) {
              _this.$message.success(msg);
              _this.getInformList();
            } else {
              _this.$message.error(msg);
            }
          });
    },
    updateInform: function (param) {
      _this.$store
          .dispatch("portal/updateInform", {
            id: _this.row.id,
            title: param["title"],
            content: param['content'],
            coverImg: param["coverImg"],
            type: param["type"],
            isSlideshow: param["isSlideshow"],
          })
          .then((res) => {
            const {data, msg} = res;
            if (data) {
              _this.$message.success(msg);
              _this.getInformList();
            } else {
              _this.$message.error(msg);
            }
          });
    },
    deleteInform: function (param) {
      _this.$store
          .dispatch("portal/deleteInform", {
            id: param
          })
          .then((res) => {
            const {data, msg} = res;
            if (data) {
              _this.$message.success(msg);
              _this.getInformList();
            } else {
              _this.$message.error(msg);
            }
          });
    },
    searchTitle: function (param) {
      _this.$store
          .dispatch("portal/searchInformTitle", {
            title: param['title'],
            type: param['types'],
            isSlideshow: param['isSlideshow'],
            page: _this.pagination["currentPage"],
            pageSize: _this.pagination["pageSize"],
          })
          .then(() => {
            _this.loading = false;
            _this.dialogVisible = false;
            let data = this.$store.state.portal.informList;
            _this.tableData = data.data;
            _this.pagination["currentPage"] = data["current_page"];
            _this.pagination["total"] = data["total"];
          });
    }

  },
  created() {
    _this = this;
    _this.getInformList();
  }
}
</script>

<style scoped>

</style>
